<template>
    <div class="borderbox" :style="`width:${props.width};height:${props.height};`">
        <div class="content">
            <slot style=" width: 100%; height: 100%;"></slot>
        </div>

        <div class="borderbottomline"></div>
        <div class="leftangle"></div>
        <div class="rightangle"></div>
    </div>
</template>

<script setup> 

const props = defineProps({
    /**宽度 */
    width: {
        type: [String],
        default: '100%'
    },
    /**高度 */
    height: {
        type: [String],
        default: '100%'
    },

})


</script>
<style lang='scss' scope>
$themecolor: #041b61;
.borderbox {
    position: relative;
    max-height: calc(100%);
    z-index: 2;
    .content {
        padding: 10px 25px;
        z-index: 11;
        width: calc(100%);
        height: 100%;
    }
    .borderbottomline {
        top: 100%;
        position: absolute;
        background: linear-gradient(
            to right,
            transparent 10%,
            $themecolor,
            #1060e9,
            $themecolor,
            transparent 90%
        );
        height: 1px;
        width: 100%;
    }
    &::before,
    &::after {
        z-index: 1;
        content: "";
        width: 1px;
        height: 100%;
        position: absolute;
        background: linear-gradient(
            transparent 10%,
            $themecolor,
            #4682ea,
            $themecolor,
            transparent 90%
        );
    }
    &::before {
        //transform: translateX(10px);
    }
    &::after {
        top: 0px;
        right: 0px;
        //transform: translateX(-4px);
    }
    .leftangle,
    .rightangle {
        top: 100%;
        width: 20px;
        height: 20px;
        position: absolute;
        border-bottom: 2px solid #0d4552;
    }
    .leftangle {
        border-left: 2px solid #0d4552;
        transform: translate(-1px, -20px);
    }
    .rightangle {
        right: 1px;
        border-right: 2px solid #0d4552;
        transform: translate(1px, -20px);
    }
}
</style>